<template>
  <h2>姓名:{{ person.name }}</h2>
  <h2>年龄:{{ person.age }}</h2>
  <h2>obj:c:{{ obj.a.b.c }}</h2>
  <button @click="changeName">修改名字</button>
  <button @click="changeAge">修改年龄</button>
  <button @click="changePerson">修改整个人</button>
  <button @click="test">修改obj</button>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
let person = reactive({
  name: "张三",
  age: 18,
});
function changeName() {
  person.name += "-";
}
function changeAge() {
  person.age += 1;
}
function changePerson() {
  Object.assign(person, { name: "李四", age: 666 }); //这个是person里面的内容修改 而不是直接换person ，ref那个才是换了整个person
}
watch(
  person,
  (newValue, oldValue) => {
    console.log("person变化了", newValue, oldValue);
  } //默认开启深度监视

  //   { deep: true, immediate: true } //deep是一变就监视  immediate是刚开始先监视一次
  //新旧都相同
);

let obj = reactive({
  a: {
    b: {
      c: 666,
    },
  },
});

function test() {
  obj.a.b.c = 888;
}
watch(obj, (newValue, oldValue) => {
  console.log("Obj变化了", newValue, oldValue);
});
</script>
